import { View } from "@tarojs/components";
import {
  SmileOutlined,
  PhotoOutlined,
  AddOutlined,
  VideoOutlined,
} from "@taroify/icons";
import { Popup, Image } from "@taroify/core";
import { Component, useEffect, useState } from "react";
import { chooseImg, toast } from "@/utils";
import { getEmojiListApi, getUserEmojiListApi } from "@/api";
import bqb from "@/assets/images/emoji/bqb.png";
import sc from "@/assets/images/emoji/sc.png";
import emoji from "@/assets/images/emoji/emoji.png";
import back from "@/assets/images/emoji/back.png";
import { getUser } from "@/utils/auth";

interface ToolsProps {
  imgCount?: number;
  changeImage?: (img: string) => void;
  changeEmoji?: (emoji: string) => void;
  handleBack?: () => void;
}

export default ({
  imgCount = 6,
  changeImage,
  changeEmoji,
  handleBack,
}: ToolsProps) => {
  const [showEmoji, setShowEmoji] = useState(false);
  const [currentEmoji, setCurrentEmoji] = useState("emoji");
  const [emojiList, setEmojiList] = useState<Array<string>>([]);
  const [selectMenu, setSelectMenu] = useState("");
  const user = getUser();

  function getEmojiList() {}
  useEffect(() => {
    if (showEmoji) {
      let fn: any;
      fn =
        currentEmoji == "sc"
          ? getUserEmojiListApi(user.kid)
          : getEmojiListApi(currentEmoji);
      fn.then((res: Array<string>) => {
        setEmojiList(res);
      });
    }
  }, [showEmoji, currentEmoji]);
  const emojiMenu = [
    { type: "emoji", component: emoji },
    { type: "sc", component: sc },
    { type: "bqb", component: bqb },
  ];
  return (
    <View className=" transition-all duration-300 ">
      <View className="flex justify-around py-2">
        <PhotoOutlined
          size={24}
          onClick={() => {
            chooseImg(imgCount).then((res) => {
              if (Array.isArray(res)) changeImage && changeImage(res.join(","));
              else changeImage && changeImage(res);
            });
          }}
        />
        <SmileOutlined
          size={24}
          onClick={() => {
            setShowEmoji(!showEmoji);
            selectMenu == "emoji" ? setSelectMenu("") : setSelectMenu("emoji");
          }}
          color={selectMenu == "emoji" ? "#4E77EB" : ""}
        />
        <VideoOutlined size={24} />
        <AddOutlined size={24} />
      </View>
      {showEmoji && (
        <View className="bg-[#F7F7F9] ">
          <View
            className={`grid grid-cols-${
              currentEmoji == "bqb" ? "4 " : "6 "
            } h-72 overflow-y-auto  flex-wrap  p-3`}
          >
            {emojiList.map((item, i) => {
              return (
                <Image
                  onClick={() => {
                    changeEmoji && changeEmoji(`http://127.0.0.1:9999${item}`);
                  }}
                  key={i}
                  width={currentEmoji == "bqb" ? 160 : 70}
                  height={currentEmoji == "bqb" ? 160 : 70}
                  lazyLoad
                  src={`http://127.0.0.1:9999${item}`}
                />
              );
            })}{" "}
          </View>
          <View className="flex justify-between px-3 py-1 items-center">
            <View className="flex gap-4">
              {emojiMenu.map((item, i) => {
                return (
                  <View
                    onClick={() => {
                      setCurrentEmoji(item.type);
                      getEmojiList();
                    }}
                    className={`${
                      item.type == currentEmoji ? "bg-white rounded-xl" : ""
                    } p-3`}
                    key={i}
                  >
                    <Image src={item.component} width={50} height={50} />
                  </View>
                );
              })}
            </View>
            <View
              className="flex-shrink-0 "
              onClick={() => handleBack && handleBack()}
            >
              <Image src={back} width={50} height={50} />
            </View>
          </View>
        </View>
      )}
    </View>
  );
};
